<template>
  <div>
    <div class="header">
    
   
      
    
  </div>
<van-tabs v-model:active="bbb" @change="aaa()" swipeable id="app">

<van-tab :title="'科目一'" >
  
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="height: 80px;">
  <van-swipe-item><van-image src="https://img0.baidu.com/it/u=2218040542,3811691756&fm=253&fmt=auto&app=138&f=GIF?w=600&h=332"></van-image></van-swipe-item>
  <van-swipe-item><van-image src="https://5b0988e595225.cdn.sohucs.com/images/20170928/db2c081aa20a45ab89a7f6d47edf85e6.jpeg"></van-image></van-swipe-item>
  <van-swipe-item><van-image src="https://img1.0515yc.cn/material/news/img/640x/2015/07/20150702112059ces.gif?vq7D"></van-image></van-swipe-item>
  </van-swipe>

  <div class="icon-1">
  <div class="circle-1">
    <!-- 中间div -->
    <div class="y-yuan">
      <van-circle
      @click="router.push('/home/TestLian/1')"
      v-model:current-rate="currentRate"
      :rate="10"
      :speed="100"
      layer-color="#399DFF"
      text="顺序练习"
    />
    </div>
    <div class="x-yuan">
      <van-circle
      @click="router.push('/home/TestKao/1')"
      v-model:current-rate="currentRate"
      :rate="10"
      layer-color="#38E2BB"
      text="模拟考试"
    />
    <div>
     <van-circle
      @click="router.push('/home/CuoTi/1')"
      v-model:current-rate="currentRate"
      :rate="10"
      layer-color="#FD5C73"
      text="错题收藏"
    />  
    </div>
    </div>
  </div>
  </div>

  <!-- <van-grid>
    <van-grid-item icon="photo-o" text="500题直播" />
    <van-grid-item icon="photo-o" text="速记口诀" />
    <van-grid-item icon="photo-o" text="扣满12分" />
    <van-grid-item icon="photo-o" text="恢复驾驶证" />
  </van-grid> -->
  <van-nav-bar title="科目一社区" style="border-bottom: 3px solid #1989FA;" />
 <!-- 评论模块 -->
 <comment-item 
            v-for="item in bata"
            :items="item"
            :key="item.content_id"
            ></comment-item>

</van-tab>

<van-tab :title="'科目二'">
  <!-- 轮播图 -->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="height: 80px;">
  <van-swipe-item><van-image src="https://img0.baidu.com/it/u=2218040542,3811691756&fm=253&fmt=auto&app=138&f=GIF?w=600&h=332"></van-image></van-swipe-item>
  <van-swipe-item><van-image src="https://5b0988e595225.cdn.sohucs.com/images/20170928/db2c081aa20a45ab89a7f6d47edf85e6.jpeg"></van-image></van-swipe-item>
  <van-swipe-item><van-image src="https://img1.0515yc.cn/material/news/img/640x/2015/07/20150702112059ces.gif?vq7D"></van-image></van-swipe-item>
  </van-swipe>
  <!-- 考试项目讲解 -->

  <!-- <van-grid :column-num="3">
  <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />
  </van-grid> -->
  <van-nav-bar title="科目二社区" style="border-bottom: 3px solid #1989FA;" />
 <!-- 评论模块 -->
 <comment-item 
            v-for="item in bata"
            :items="item"
            :key="item.content_id"
            ></comment-item>

</van-tab>

<van-tab :title="'科目三'">
  <!-- 轮播图 -->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="height: 80px;">
  <van-swipe-item><van-image src="https://img0.baidu.com/it/u=2218040542,3811691756&fm=253&fmt=auto&app=138&f=GIF?w=600&h=332"></van-image></van-swipe-item>
  <van-swipe-item><van-image src="https://5b0988e595225.cdn.sohucs.com/images/20170928/db2c081aa20a45ab89a7f6d47edf85e6.jpeg"></van-image></van-swipe-item>
  <van-swipe-item><van-image src="https://img1.0515yc.cn/material/news/img/640x/2015/07/20150702112059ces.gif?vq7D"></van-image></van-swipe-item>
  </van-swipe>
  <!-- 考试项目讲解 -->

  <!-- <van-grid :column-num="3">
  <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />
  </van-grid> -->
  <van-nav-bar title="科目三社区" style="border-bottom: 3px solid #1989FA;" />
 <!-- 评论模块 -->
 <comment-item 
            v-for="item in bata"
            :items="item"
            :key="item.content_id"
            ></comment-item>

</van-tab>

<van-tab :title="'科目四'">
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="height: 80px;">
  <van-swipe-item><van-image src="https://img0.baidu.com/it/u=2218040542,3811691756&fm=253&fmt=auto&app=138&f=GIF?w=600&h=332"></van-image></van-swipe-item>
  <van-swipe-item><van-image src="https://5b0988e595225.cdn.sohucs.com/images/20170928/db2c081aa20a45ab89a7f6d47edf85e6.jpeg"></van-image></van-swipe-item>
  <van-swipe-item><van-image src="https://img1.0515yc.cn/material/news/img/640x/2015/07/20150702112059ces.gif?vq7D"></van-image></van-swipe-item>
  </van-swipe>
  
  <div class="icon-4">
  <div class="circle-4">
    <!-- 中间div -->
    <div class="y-yuan">
      <van-circle
      @click="router.push('/home/TestLian/2')"
      v-model:current-rate="currentRate"
      :rate="10"
      :speed="100"
      layer-color="#399DFF"
      text="顺序练习"
    />
    </div>
    <div class="x-yuan">
      <van-circle
      @click="router.push('/home/TestKao/2')"
      v-model:current-rate="currentRate"
      :rate="10"
      layer-color="#38E2BB"
      text="模拟考试"
    />

    <div>
     <van-circle
      @click="router.push('/home/CuoTi/2')"
      v-model:current-rate="currentRate"
      :rate="10"
      layer-color="#FD5C73"
      text="错题收藏"
    />  
    </div>
    
    </div>

  </div>
  
  </div>

  <!-- <van-grid>
    <van-grid-item icon="photo-o" text="500题直播" />
    <van-grid-item icon="photo-o" text="速记口诀" />
    <van-grid-item icon="photo-o" text="扣满12分" />
    <van-grid-item icon="photo-o" text="恢复驾驶证" />
  </van-grid> -->
  <van-nav-bar title="科目四社区" style="border-bottom: 3px solid #1989FA;" />
  <!-- 评论模块 -->
 <comment-item 
            v-for="item in bata"
            :items="item"
            :key="item.content_id"
            ></comment-item>

</van-tab>

</van-tabs>
  </div>
</template>

<script setup>
import CommentItem from "@/components/CommentItem.vue";
import { createApp, ref, computed,reactive,onMounted} from 'vue';
import { Tab, Tabs, Icon,Circle,Grid, GridItem,Sidebar, SidebarItem,Swipe, SwipeItem,Image} from 'vant';
import { useRouter } from 'vue-router';
import httpApi from '@/http';


const app = createApp();
const currentRate = ref(0);
const router = useRouter();
const bbb=ref(0);
const batacover=reactive([]);
const bata = reactive([]);
const aaa =  function(){
  console.log(bbb)
  let ccc='科目一'
      if(bbb.value==0){
        ccc='科目一'
      }else if(bbb.value==1){
        ccc='科目二'
      }else if(bbb.value==2){
        ccc='科目三'
      }else if(bbb.value==3){
        ccc='科目四'
      }
      console.log(ccc)
      httpApi.liveApi.queryBylist({ page:1,pagesize:10,type:ccc }).then((res) => {
        console.log("加载详情：", res);
        bata.splice(0,bata.length,...res.data.data.result)
        console.log(res.data.data.result[length].content_cover)

        batacover.splice(0,batacover.length,...res.data.data.result[length].content_cover.split(";"))
        console.log(batacover)

      });
    
 
};
onMounted (()=>{
  httpApi.liveApi.queryBylist({ page:1,pagesize:10,type:'科目一' }).then((res) => {
        console.log("加载详情：", res);
        bata.splice(0,bata.length,...res.data.data.result)
        console.log(res.data.data.result[length].content_cover)

        batacover.splice(0,batacover.length,...res.data.data.result[length].content_cover.split(";"))
        console.log(batacover)

      });
});

// const text = computed(() => currentRate.value.toFixed(0) + '%');
// const apx = new Vue({
//       el: '#app',
//       data: {
//         fruit: ''
//       }
//     })


app.use(Tab);
app.use(Tabs);
app.use(Icon);
app.use(Circle);
app.use(Grid);  
app.use(GridItem);
app.use(Sidebar);
app.use(SidebarItem);
app.use(Swipe);
app.use(SwipeItem);





</script>

<style lang="scss" scoped>
// 导航条css
.title {
  line-height: 26px;
  font-size: 14px;
  background-color: var(--font-color-gary);
  font-size: 14px;
  font-weight: lighter;
  padding: 0 5px;
}
/* 自动定位 */
.autoPosition {
  display: flex;
  justify-content: space-between;
  line-height: 50px;
  padding: 0 10px;
  > .area {
    font-size: 16px;
  }
  /* 自动定位-重新定位 */
  > .againPosition {
    > i {
      font-size: 15px;
    }
    > span {
      margin-left: 5px;
      color: var(--color-blue-400);
      font-size: 16px;
    }
  }
}
//科目一css

.icon-1>div>div {
margin-top: 20px;
}
.icon-1 p {
font-size: 0.5rem;
}
.circle-1 {
display: flex;
flex-flow: column;
justify-content: space-around;
}

//科目四css

.icon-4>div>div {
margin-top: 20px;
}
.icon-4 p {
font-size: 0.5rem;
}
.x-yuan {
  display: flex;
  justify-content: space-evenly;
}
.y-yuan {
  text-align: center;
}
.circle-4 {
display: flex;
flex-flow: column;
justify-content: space-around;
}


</style>